import React, { Component } from "react";
let count = 0;
export default class ine extends Component {
  constructor() {
    super();
    this.state = {
      count: count,
    };
  }
  componentWillMount() {
    this.setState({ count: ++count });
    this.setState({ count: ++count });
    setTimeout(() => {
      this.setState({ count: ++count });
    }, 1000);
    setTimeout(() => {
      this.setState({ count: ++count });
    }, 1000);
  }
  componentDidMount() {
    this.button2.addEventListener(
      "click",
      this.onClick3.bind(this, "原生浏览器"),
      false
    );
  }
  onClick(info) {
    console.log(info, count, this.state.count);
    for (let i = 0; i < 3; i++) {
      this.setState({ coun: ++count });
    }
    console.log(this.state.count,"btn1");
  }
  onClick2(info) {
    console.log(info, count, this.state.count);
    for (let i = 0; i < 3; i++) {
      this.setState({ coun: ++count });
    }
    console.log(this.state.count,"btn2");
  }
  onClick3(info) {
    console.log(info, count, this.state.count);
    for (let i = 0; i < 3; i++) {
      this.setState({ coun: ++count });
    }
    console.log(this.state.count,"btn3");
  }
  render() {
    console.log(this.state.count, "render");
    return (
      <div>
        <button
          type="button"
          ref={(node) => (this.button = node)}
          onClick={this.onClick1.bind(this, "react事件")}
        >
          生成新计数1
        </button>
        <button
          type="button"
          ref={(node) => (this.button1 = node)}
          onClick={this.onClick2.bind(this, "react事件")}
        >
          生成新计数2
        </button>
        <button type="button" ref={(node) => (this.button2 = node)}>
          生成新计数3
        </button>
        <div>Count:{this.state.count}</div>
      </div>
    );
  }
}
